<template>
  <!-- tab切换组件 -->
  <div class="s-All">
    <div
      :class="{ 's-bottom': num == index }"
      v-for="(d, index) in propsObj.listTab"
      :key="d.id"
      @click="onClick(d, index)"
    >
      {{ d.name }}
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
const props = defineProps(["listTab", "numIndex"]);
const propsObj = props;

// 监听区域
watch(
  () => propsObj.numIndex,
  (newValue, oldValue) => {
    num.value = propsObj.numIndex;
  }
);
// 组件自定义事件注册
const emit = defineEmits(["hanClick"]);

// 数据操作部分
let num = ref(propsObj.numIndex as number);
function onClick(d: any, index: number) {
  emit("hanClick", d, index);
}
</script>
<style scoped>
.s-All {
  display: flex;
  position: relative;
  color: #fff;
  background-color: #272727;
  padding: 12px 0px;
  outline: 1px solid rgba(0, 0, 0, 0.3);
}
.s-All > div {
  cursor: pointer;
  position: relative;
  padding: 5px 0px;
  margin: 0px 12px;
}
.s-bottom {
  border-bottom: 3px solid #42b983;
}
</style>
